<template>
  <div>
    <page-container>
      <el-form :model="classroomForm" label-width="auto" class="max-w-[600px]">
        <el-form-item label="教室名称" required>
          <el-input
            v-model="classroomForm.roomName"
            class="w-260px!"
            placeholder="请输入教室名称"
            maxlength="28"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="图片" required>
          <div>
            <image-picker :width="100" :ratio="NaN" />
            <div class="color-999">支持图片jpg png格式，建议尺寸750*422或16:9，小于2M，最多上传3张</div>
          </div>
        </el-form-item>
        <el-form-item label="面积" required>
          <el-input
            v-model="classroomForm.roomName"
            v-restrict-to-number:positive-integer="99999"
            class="w-260px!"
            placeholder="请输入教室面积"
          />
          <span class="ml-5px text-14px">平米</span>
        </el-form-item>
        <el-form-item label="最低起订时长" required>
          <el-select v-model="classroomForm.roomName" class="w-260px!" placeholder="请选择最低起订时长">
            <el-option v-for="item in 10" :key="item" :label="item" :value="item" />
          </el-select>
          <span class="ml-5px text-14px">分钟</span>
        </el-form-item>
        <el-form-item label="标签">
          <el-radio-group v-model="time_type" class="mb_10">
            <el-radio :label="0">统一时间</el-radio>
            <el-radio :label="1">根据周几设置不同营业时间</el-radio>
          </el-radio-group>
          <div v-if="time_type == 0" class="flex items-center gap-10px mt-10px">
            <el-select
              v-model="startTime"
              class="inp_mx"
              placeholder="开始时间"
              filterable
              @blur="startTime = checkTime($event.target.value, timeList, startTime)"
            >
              <!--  -->
              <el-option v-for="item in timeList" :key="item" :label="item" :value="item" />
            </el-select>
            <span>至</span>
            <el-select
              v-model="endTime"
              class="inp_mx"
              placeholder="结束时间"
              filterable
              @blur="endTime = checkTime($event.target.value, timeList, endTime)"
            >
              <!-- @change="endChange" -->
              <!-- @blur="timeBlur($event, 'exeIntervalEndTime')" -->
              <el-option v-for="item in timeList" :key="item" :label="item" :value="item" />
            </el-select>
          </div>
          <div v-else class="time_interval_box">
            <div v-for="(item, index) in timeInterval" :key="index" class="time_interval">
              <div class="top">
                <div>时段{{ index + 1 }}</div>
                <el-link type="primary" @click="delTime(index)">删除</el-link>
              </div>
              <div class="mid">
                <span>日期范围</span>
                <el-checkbox-group v-model="item.weeks">
                  <el-checkbox v-for="(item1, index1) in weekList" :key="index1" :label="item1.value">{{
                    item1.label
                  }}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="bottom">
                <span>时间范围</span>
                <div class="flex gap-10px">
                  <el-select
                    v-model="item.start_time"
                    class="w-200px!"
                    placeholder="开始时间"
                    filterable
                    @blur="timeBlur($event, index, 'start_time')"
                  >
                    <!-- @change="endTimeChange(item, index)" -->
                    <el-option v-for="item2 in timeList" :key="item2" :label="item2" :value="item2" />
                  </el-select>
                  <span>至</span>
                  <el-select
                    v-model="item.end_time"
                    class="w-200px!"
                    placeholder="结束时间"
                    filterable
                    @blur="timeBlur($event, index, 'end_time')"
                  >
                    <!-- @change="endTimeChange(item, index)" -->
                    <el-option v-for="item2 in timeList" :key="item2" :label="item2" :value="item2" />
                  </el-select>
                </div>
              </div>
            </div>
            <div class="add_time" @click="addTime">
              <svg-icon icon-class="add" class="fs_14" />
              添加时段
            </div>
          </div>
        </el-form-item>
        <el-form-item label="注意事项">
          <el-input v-model="classroomForm.roomName" type="textarea" placeholder="请输入注意事项" :rows="3" />
        </el-form-item>
        <el-form-item label="场地介绍">
          <ImageTextMixing />
        </el-form-item>
      </el-form>
    </page-container>
  </div>
</template>

<script lang="ts" setup>
import { checkTime } from '@/utils/utils'

defineOptions({ name: 'ClassroomCreateUpdate' })
const classroomForm = reactive({
  roomName: '',
})

const time_type = ref(0)
const startTime = ref('')
const endTime = ref('')
const timeList = [
  '08:00',
  '08:30',
  // 往后写
  '09:00',
  '09:30',
  '10:00',
  '10:30',
  '11:00',
  '11:30',
]
const timeInterval = ref([
  {
    weeks: [1, 2, 3, 4, 5],
    start_time: '',
    end_time: '',
  },
  {
    weeks: [6, 7],
    start_time: '',
    end_time: '',
  },
])
const weekList = [
  {
    label: '周一',
    value: 1,
  },
  {
    label: '周二',
    value: 2,
  },
  {
    label: '周三',
    value: 3,
  },
  {
    label: '周四',
    value: 4,
  },
  {
    label: '周五',
    value: 5,
  },
  {
    label: '周六',
    value: 6,
  },
  {
    label: '周日',
    value: 7,
  },
]
const timeBlur = (e: any, index: number, type: string) => {
  if (type === 'start_time') {
    timeInterval.value[index].start_time = checkTime(e.target.value, timeList, timeInterval.value[index].start_time)
  } else if (type === 'end_time') {
    timeInterval.value[index].end_time = checkTime(e.target.value, timeList, timeInterval.value[index].end_time)
  }
}
const delTime = (idx: number) => {}
const addTime = () => {}
</script>

<style scoped lang="scss">
.time_interval_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  .time_interval {
    width: 550px;
    background: #f6f7f9;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    ::v-deep .el-checkbox {
      margin-right: 10px;
    }
    .top {
      display: flex;
      justify-content: space-between;
    }
    .mid,
    .bottom {
      display: flex;
      gap: 15px;
      align-items: center;
    }
  }
  .add_time {
    width: 550px;
    background: #f6f7f9;
    border-radius: 4px;
    padding: 10px;
    color: $main-color;
    cursor: pointer;
  }
}
</style>
